* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
/* music 按钮 */
.music-btn {
  top: 25px;
  left: 25px;
  z-index: 3;
  position: fixed;
  width: 40px;height: 40px;
  background: url(./assert/close.png)
  no-repeat center / cover;
}
.music-btn.off {
  background-image: url(./assert/music.png);
}
/* 下一屏 箭头 */
.next-view-c {
  z-index: 99999;
  background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
  background-size: 100%;
  left: 50%;
  bottom: 10px;
  width: 13px;
  height: 86px;
  position: fixed;
  transform: translate3d(-50%, 0 ,0);
}
.view {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.view.index {
  background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
  background-size: cover;
  position: absolute;
}
.logo-c{
  position: absolute;
    top: 5.6%;
    right: 15%;
    width: 186px;
    height: 218px;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png) no-repeat;
    /* background-size: 186px auto; */
    background-size: 100%;
}
/* 第二屏 特殊 view special*/
.view.special {
  position: absolute;
  background-image: 
  linear-gradient(60deg,#f8ddd1,#faece5 73%,#fad2c0);
}
/* 中间太阳 */
.sun {
  position: absolute;
  top: 45%;
  width: 283px;
  height: 283px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/sun.a3f575ae2fef2cfdae15011e6081a094.png) no-repeat;
  background-size: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/* 秋千 外层压缩 */
.art {
  transform: scale(.5);
  position: absolute;
    top: -140px;
    right: 0;
    width: 750px;
    height: 1334px;
    transform: scale(.5);
    transform-origin: top right;
}
/* 秋千动画 */
.swing {
  display: block;
  position: absolute;
  left: 226px;
  top: -180.25px;
  width: 478px;
  height: 1038px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/swing.88545d6c8e1ac798465e367f8e5357ab.png) no-repeat;
  transform-origin: -16.10878661% -29.76878613%;
  animation: ani4_qiuqian 6s cubic-bezier(.455,.03,.515,.955) infinite;
}
@keyframes ani4_qiuqian {
  0% {
    transform: rotateZ(0deg);
}
50% {
    transform: rotateZ(31.99359208deg);
}
100% {
    transform: rotateZ(0deg);
}
}
/* 腿动画 */
.swing .leg2 {
  display: block;
  position: absolute;
  left: 185.375px;
  top: 958px;
  width: 130px;
  height: 32px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2.d7bc44a91b6974450f2ccc430846c63d.png) no-repeat;
  transform-origin: 91.1538461538462% 33.59375%;
  animation: ani7_leg2 8s ease infinite;
}
@keyframes ani7_leg2 {
  0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(-86.98199658deg);
}
50% {
    transform: rotate(0deg);
}
75% {
    transform: rotate(-86.98199658deg);
}
100% {
    transform: rotate(0deg);
}
}
.swing .leg2 .jiojio {
  display: block;
  position: absolute;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2-part.8f70bb7fc789a70bc78c48aa7718a765.png) no-repeat;
  left: -27.75px;
  top: -10.5px;
  width: 57px;
  height: 44px;
}
.swing .leg1 {
  display: block;
  position: absolute;
  left: 290.375px;
  top: 955.25px;
  width: 63px;
  height: 130px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1.b1df6a7d1a794d36fbd0e1277733e1cf.png) no-repeat;
  transform-origin: 17.8571428571429% 13.3653846153846%;
  animation: ani5_leg1 8s ease infinite;
}
@keyframes ani5_leg1 {
  0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(108.97744399deg);
}
50% {
    transform: rotate(0deg);
}
75% {
    transform: rotate(108.97744399deg);
}
100% {
    transform: rotate(0deg);
}
}
/* 腿的一部分 */
.leg1 .jiojio {
  display: block;
  position: absolute;
  left: 26.25px;
  top: 102.5px;
  width: 39px;
  height: 62px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1-part.f2f17703a6af8fd2af5e0f5a9f320623.png) no-repeat;
}
.swing .neck {
  position: absolute;
  left: 451.125px;
  top: 855.5px;
  width: 51px;
  height: 42px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/neck.07a0013beff9796ed79c2cea542e5af2.png) no-repeat;
}
/* 头 */
.swing .neck, .swing .head {
  display: block;
  position: absolute;
  left: 451.125px;
  top: 855.5px;
  width: 51px;
  height: 42px;
}
/* 脖子 */
.swing .neck {
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/neck.07a0013beff9796ed79c2cea542e5af2.png) no-repeat;
}
/* 头 */
.swing .head {
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/head.90bf892023d7df0522a4b53fc07e38df.png) no-repeat;
  animation: ani2_head 8s ease infinite;
}
/* 头发 */
.swing .head .part {
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/head-part.22d4381c4bd6cb1c3afd2b1bfcfe22f1.png) no-repeat;
  left: 20px;
  top: 2px;
  width: 40px;
  height: 47px;
  position: absolute;
}
@keyframes ani2_head {
  0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(-55deg);
}
62.5% {
    transform: rotate(-55deg);
}
87.92% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(0deg);
}
}
/* 特殊的内容 */
.paras {
  bottom: 110px;
  left: 10.67%;
  position: absolute;
    line-height: 1.6667;
    letter-spacing: 1px;
    color: #333;
}
.s-fcRed {
  color: #df493a;
}
.z-enter .f-animLineUp {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s,transform 1s;
}
.f-animLineUp {
  opacity: 0;
  transform: translateY(6px);
}
em, i {
  font-style: normal;
  text-align: left;
}

.view.slide-3 {
  background-image: linear-gradient(0deg,#f8d7cf,#fff 50%,#fff);
}
/* 最喜欢的歌手 */
.id18_juian {
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/juan3.1c58874dbcd7f233bf027e9332ea6d96.png) no-repeat;
  right: 0;
  top: 0;
  width: 483px;
  height: 159px;
  display: block;
  position: absolute;
  transform: scale(.5);
  transform-origin: top right;
  visibility: hidden;
}
.view.favourite .z-juanAni2 {
  visibility: visible;
  animation: juanAnimation .5s steps(1) reverse,
  juanAnimation 1s steps(1) 1s forwards;
}

@keyframes juanAnimation {
	0% {
		background-position: 0 0
	}

	3.70% {
		background-position: -483px 0
	}

	7.41% {
		background-position: -966px 0
	}

	11.11% {
		background-position: -1449px 0
	}

	14.81% {
		background-position: 0 -159px
	}

	18.52% {
		background-position: -483px -159px
	}

	22.22% {
		background-position: -966px -159px
	}

	25.93% {
		background-position: -1449px -159px
	}

	29.63% {
		background-position: 0 -318px
	}

	33.33% {
		background-position: -483px -318px
	}

	37.04% {
		background-position: -966px -318px
	}

	40.74% {
		background-position: -1449px -318px
	}

	44.44% {
		background-position: 0 -477px
	}

	48.15% {
		background-position: -483px -477px
	}

	51.85% {
		background-position: -966px -477px
	}

	55.56% {
		background-position: -1449px -477px
	}

	59.26% {
		background-position: 0 -636px
	}

	62.96% {
		background-position: -483px -636px
	}

	66.67% {
		background-position: -966px -636px
	}

	70.37% {
		background-position: -1449px -636px
	}

	74.07% {
		background-position: 0 -795px
	}

	77.78% {
		background-position: -483px -795px
	}

	81.48% {
		background-position: -966px -795px
	}

	85.19% {
		background-position: -1449px -795px
	}

	88.89% {
		background-position: 0 -954px
	}

	92.59% {
		background-position: -483px -954px
	}

	96.30% {
		background-position: -966px -954px
	}

	100.00% {
		background-position: -1449px -954px
	}
}
@keyframes juanAnimation2 {
	0% {
		background-position: 0 0
	}

	3.70% {
		background-position: -483px 0
	}

	7.41% {
		background-position: -966px 0
	}

	11.11% {
		background-position: -1449px 0
	}

	14.81% {
		background-position: 0 -159px
	}

	18.52% {
		background-position: -483px -159px
	}

	22.22% {
		background-position: -966px -159px
	}

	25.93% {
		background-position: -1449px -159px
	}

	29.63% {
		background-position: 0 -318px
	}

	33.33% {
		background-position: -483px -318px
	}

	37.04% {
		background-position: -966px -318px
	}

	40.74% {
		background-position: -1449px -318px
	}

	44.44% {
		background-position: 0 -477px
	}

	48.15% {
		background-position: -483px -477px
	}

	51.85% {
		background-position: -966px -477px
	}

	55.56% {
		background-position: -1449px -477px
	}

	59.26% {
		background-position: 0 -636px
	}

	62.96% {
		background-position: -483px -636px
	}

	66.67% {
		background-position: -966px -636px
	}

	70.37% {
		background-position: -1449px -636px
	}

	74.07% {
		background-position: 0 -795px
	}

	77.78% {
		background-position: -483px -795px
	}

	81.48% {
		background-position: -966px -795px
	}

	85.19% {
		background-position: -1449px -795px
	}

	88.89% {
		background-position: 0 -954px
	}

	92.59% {
		background-position: -483px -954px
	}

	96.30% {
		background-position: -966px -954px
	}

	100.00% {
		background-position: -1449px -954px
	}
}

/*  */
.favourite-songs {
  position: relative;
}
.manwrap {
  position: absolute;
  width: 486px;
  height: 494px;
  right: 0;
  bottom: 0;
  transform: scale(0.5);
}
.man {
  position: absolute;
  width: 486px;
  height: 494px;
  top: 0;
  left: 0;
  background:  url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/man.fafe9d20caf92e672faf6cac0506c94b.png) no-repeat;
}
.shoubi {
  position: absolute;
    left: 70px;
    top: -115px;
    background-image: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/shoubi.dfdeb7747a98b98266ff5b0713024c87.png);
    width: 246px;
    height: 270px;
    animation: p14-shoubi 1.3s steps(12) infinite;
}
@keyframes p14-shoubi{
  0% {
    background-position: 0 0;
}
/* 8.33% {
    background-position: -246px 0;
}
16.67% {
    background-position: -492px 0;
}
25% {
    background-position: -738px 0;
}
33.33% {
    background-position: -984px 0;
}
41.67% {
    background-position: -1230px 0;
}
50% {
    background-position: -1476px 0;
}
58.33% {
    background-position: -1722px 0;
}
66.67% {
    background-position: -1968px 0;
}
75% {
    background-position: -2214px 0;
}
83.33% {
    background-position: -2460px 0;
}
91.67% {
    background-position: -2706px 0;
} */
100% {
    background-position: -2952px 0;
}
}
.tou {
  position: absolute;
  left: 220px;
  top: -5px;
  width: 94px;
  height: 101px;
  background: url(//s5.music.126.net/static_public/5c21db8d4684556c72180904/tou.763e9f0545a28bfbc642f5d8db77c9d5.png) no-repeat;
  -webkit-animation: p14-tou 1.3s steps(1) infinite;
  animation: p14-tou 1.3s steps(1) infinite;
}
/* cat */
.cat {
  width: 117px;
  height: 201px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.bg {
  width: 100%;height: 100%;
  position: absolute;
  left: 0;top: 0;
  background: url(./assert/cat/maoshenti.png);
  z-index: 2;
}
.maoyan {
  width: 3px;
  height: 3px;
  position: absolute;
  z-index: 3;
}
.maoyan1 {
  background: url(./assert/cat/maoyan1.png);
  right: 40px;
  bottom: 24px;
}
.maoyan2 {
  background: url(./assert/cat/maoyan2.png);
  right: 20px;
  bottom: 20px;
}
.maozui {
  width: 4px;
  height: 3px;
  position: absolute;
  bottom: 11px;
  right: 33px;
  background: url(./assert/cat/maozui.png);
  z-index: 3;
}
.maowei {
  width: 64px;
  height: 194px;
  background: url(./assert/cat/maowei.png);
  position: absolute;
  left: 0;
  top: -182px;
  transform-origin: 40% 96%;
  animation: ani_maowei 3s ease-in-out infinite;
}
@keyframes ani_maowei {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-5deg);
  }
}
.maozhua {
  width: 34px;
  height: 81px;
  background: url(./assert/cat/maozhua.png);
  right: 13px;bottom: -63px;
  position: absolute;
  z-index: 1;
  transform-origin: 60% 4%;
  animation: ani_maozhua 3s ease-in-out infinite;
}
@keyframes ani_maozhua {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-11deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
